<template>
	<view class="friend-add-page">
		<view class="search-bar-wrapper" @click="navigateToFriendSearch">
			<u-search
				placeholder="搜索 账号/手机号"
				:showAction="false"
				searchIconSize="20"
				@focus="navigateToFriendSearch"
			></u-search>
		</view>

		<u-cell-group :border="false" class="action-list">
			<u-cell
				icon="scan"
				icon-style="width:24px; height:24px; margin-right:12px;color:#1E6FFF;"
				title="扫一扫"
				label="扫描二维码名片"
				isLink
				arrow-direction="right"
				@click="handleScanCode"
				size="large"
			></u-cell>
			<u-cell
				icon="phone" 
				icon-style="width:24px; height:24px; margin-right:12px;color:green;"
				title="手机联系人"
				label="添加通讯录中的朋友"
				isLink
				arrow-direction="right"
				@click="handlePhoneContacts"
				size="large"
			></u-cell>
		</u-cell-group>

		<view class="my-wechat-id-section">
			<ikun-qrcode
				width="300"
				height="300"
				unit="rpx"
				:data="qrValue"
				:logo="$store.state.userInfo.avatar"
				logo-width="50"
				logo-height="50"
			/>
			<text class="my-id-text">我的账号: {{$store.state.userInfo.userName}}</text> 
		</view>
	</view>
</template>

<script>
import processScanResult from '@/utils/scan-processor.js';
// 引入配置文件
import config from '@/config/index.js';
export default {
	data() {
		return {
			qrValue: '',   // 二维码的内容
		};
	},
	onLoad() {
		this.qrValue = `${config.appSchemeHost}/user/profile?userId=${this.$store.state.userInfo.userId}`;
	},
	methods: {
		navigateToFriendSearch() {
			uni.navigateTo({
				url: '/pages_sub/common/friend-search/friend-search',
			});
		},
		handleScanCode() {
			uni.scanCode({
				onlyFromCamera: true,
				scanType: ['qrCode'],
				success: (res) => {
					// 调用处理器，传入扫描结果和配置
					processScanResult(res.result);
				},
				fail: (err) => {
					// 仅处理非取消操作的失败
					if (err.errMsg !== 'scanCode:fail cancel') {
						uni.showToast({
							title: '扫码失败',
							icon: 'none'
						});
					}
				}
			});
		},
		handlePhoneContacts() {
			uni.navigateTo({
				url:'/pages_sub/index/friends/phone-contacts'
			})
		},
	},
};
</script>

<style lang="scss" scoped>
.friend-add-page {
	min-height: 100vh;
}

.search-bar-wrapper {
	padding: 20rpx;
	// 如果搜索框在页面滚动时需要固定，则要用 position:fixed 和占位 view
}

.action-list {
	margin-top: 20rpx; // 与搜索框的间距
	background-color: #FFFFFF;
	::v-deep .u-cell {
		.u-cell__body {
			padding: 24rpx 30rpx;
		}
		.u-cell__title-text {
			font-size: 32rpx;
			color: #303133;
		}
		.u-cell__label {
			font-size: 24rpx;
			color: #909399;
			margin-top: 4rpx;
		}
	}
}

.my-wechat-id-section {
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 60rpx 0;
	margin-top: 40rpx; // 与列表的间距
	// background-color: #FFFFFF; // 如果需要白色背景块

	.qr-code-image {
		width: 300rpx; // 根据实际二维码调整
		height: 300rpx;
		margin-bottom: 24rpx;
		border: 1rpx solid #E0E0E0; // 可选的边框
	}

	.my-id-text {
		font-size: 28rpx;
		color: #000;
		margin-top:90rpx;
	}
}
</style>